<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="10">
      <el-col :span="18">
        <el-card>
          <h1 style="color:orange; text-align: center">{{ detailArr.title }}</h1>
          <p style="color: #666;text-align: center;font-size: 12px">
            作者:{{ detailArr.nickname }} | 发布时间:{{ detailArr.createTime }} | 阅读次数: {{ detailArr.viewCount }}
          </p>
          <hr>
          <div v-if="detailArr.type!=2">
            <el-card>
              <span style="color:#0aa1ed; font-weight: bold">摘要:</span>
              {{ detailArr.brief }}
            </el-card>
            <p v-html="detailArr.content"></p>
          </div>
          <video v-else :src="'http://localhost:8080'+detailArr.videoUrl" controls type="video/mp4"
                 style="width: 100%;"></video>
        </el-card>
        <el-card style="margin-top: 10px">
          <p>发一条友善的评论</p>
          <hr>
          <el-row :gutter="10">
            <el-col :span="22">
              <el-input placeholder="说点儿啥..." v-model="comment.content"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button @click="post()">发布</el-button>
            </el-col>
          </el-row>
          <!--         评论列表-->
          <el-row :gutter="10" v-for="item in commentArr">
            <el-col :span="2">
              <el-avatar style="margin: 5px 0" :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="22">
              <p style="color:orange;font-weight: bold;margin: 5px 0">{{ item.nickname }}</p>
              <p style="margin: 0">{{ item.content }}</p>
              <p style="color: #666;font-size: 12px;margin: 0">{{ item.createTime }}</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div id="head_div"></div>
          <div style="text-align: center;position: relative;bottom: 45px">
            <el-avatar :src="'http://localhost:8080'+detailArr.userImgUrl" :size="90"
                       style="border: 5px solid white"></el-avatar>
            <p style="font-size: 20px;font-weight: bold;margin: 0">{{ detailArr.nickname }}</p>
            <el-icon>
              <Edit/>
            </el-icon>
            本文作者<br>
            <el-icon>
              <Clock/>
            </el-icon>
            {{ detailArr.createTime }}
          </div>
        </el-card>
        <el-card style="margin-top: 10px">
          <h2>作者其它文章</h2>
          <hr>
          <div v-for="item in otherArr">
            <router-link :to="'/detail?id='+item.id" style="color: #333;text-decoration: none;" :underline="false">
          <el-row :gutter="10" >
              <el-col :span="10"><img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;" alt=""></el-col>
              <el-col :span="14">
                <p style="margin-top: 0;">{{ item.title }}</p>
                <p style="font-size: 12px;color:#666;margin: 0">{{ item.createTime }}</p>
            </el-col>
          </el-row>
            </router-link>
          </div>
        </el-card>
        <el-card style="margin-top: 10px">
          <h2>热门文章</h2>
          <hr>
          <div v-for="item in hotArr">
            <router-link :to="'/detail?id='+item.id" style="color: #333;text-decoration: none" :underline="false">
          <el-row :gutter="10">
            <el-col :span="10"><img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;" alt=""></el-col>
            <el-col :span="14">
              <p style="margin-top: 0">{{ item.title }}</p>
              <p style="font-size: 12px;color:#666;margin: 0">{{ item.createTime }}</p>
            </el-col>
          </el-row>
            </router-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onBeforeUpdate, onMounted, ref} from "vue";
import axios from "axios";
import Editor from 'wangeditor';
import router from "@/router";
import qs from "qs";
import {ElMessage} from "element-plus";

const otherArr = ref([]);
const detailArr = ref({});
const hotArr = ref([]);
const comment = ref({content:''});
const commentArr = ref([]);

const post=()=>{
  //得到登录的用户id
  let user = localStorage.user?JSON.parse(localStorage.user):null;
  if (user==null){
    alert("请先登录!");
    router.push('/login');
    return;
  }
  comment.value.userId = user.id; //作者id
  comment.value.contentId = detailArr.value.id; //评论文章id
  let data = qs.stringify(comment.value);
  axios.post('http://localhost:8080/v1/comments/add-new',data)
  .then((response)=>{
    if (response.data.code==2001){
      ElMessage.success("评论完成!");
      comment.value.content="";
      loadComments();
    }
  })
}
const loadComments=()=>{
  let id = new URLSearchParams(location.search).get('id');
  axios.get('http://localhost:8080/v1/comments/'+id).then((response)=>{
    if (response.data.code==2001){
      commentArr.value = response.data.data;
    }
  })
}

const initData =()=>{
  if (location.search.includes('id')) {
    let id = new URLSearchParams(location.search).get('id');
    console.log(id);
    axios.get('http://localhost:8080/v1/contents/' + id + '/detail').then((response) => {
      if (response.data.code == 2001) {
        detailArr.value = response.data.data;
        axios.get('http://localhost:8080/v1/contents/'+detailArr.value.id+'/'+detailArr.value.userId+'/other').then((response)=>{
          if (response.data.code==2001){
            otherArr.value = response.data.data;
          }
        });
        axios.get('http://localhost:8080/v1/contents/hot/'+detailArr.value.id).then((response)=>{
          if (response.data.code==2001){
            hotArr.value = response.data.data;
          }
        })
      }
    })
  }
}
onMounted(() => {
  initData();
  loadComments();
})
onBeforeUpdate(() => {
  initData();
  loadComments()
})
</script>

<style scoped>
#head_div {
  height: 90px;
  background-image: url("/public/imgs/avarbg.jpg");
}
</style>